<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米商城</title>

        <style type="text/css">
            body { background: #dedede ; }
            .logo {
                position: relative ;
                margin: auto ;
                width: 550px ;
                height: 550px ;
                background-color: #ff740f ;
                overflow: hidden ;
            }

            .logo .first {
                width: 550px ;
                height: 550px ;
                background-image: url("mi-home.png") ;
                background-repeat: no-repeat ;
                background-position: center ;
                background-size: 550px 550px ;
                position: absolute ;
                left: -550px ;
                top : 0 ;
                transition: all 300ms ;
            }

            .logo:hover .first { left: 0 ; }
            .logo:hover .second { left: 550px ; }

            .logo .second {
                width: 550px ;
                height: 550px ;
                background-image: url("mi-logo.png") ;
                background-repeat: no-repeat ;
                background-position: center ;
                background-size: 550px 550px ;
                position: absolute;
                left: 0 ;
                top: 0 ;
                transition: all 300ms ;
            }
        </style>


    </head>
    <body>

        <div class="logo">
            <div class="first"></div>
            <div class="second"></div>
        </div>

    </body>
</html>